<template>
  <el-tabs v-model="activeName" class="tab-title">
    <el-tab-pane label="表单设计" name="form"> </el-tab-pane>
    <el-tab-pane label="流程设计" name="flow"> </el-tab-pane>
  </el-tabs>
  <div class="tab-content">
    <VFormDesigner v-show="activeName === 'form'" ref="formDesigner" @update="updateTableForm" />
    <VFlowPanel v-show="activeName === 'flow'" ref="flowPanel" @update="updateFlowObject" />
  </div>
</template>

<script setup lang="ts">
import type { FormDesigner } from '@/components/VForm/types'
import type { FlowPanel } from '@/components/VFlow/types'
const activeName = ref<string>('form')
const formDesigner = ref<FormDesigner | null>(null)
const flowPanel = ref<FlowPanel | null>(null)
const tableForm = ref()
const flowObject = ref()
const updateTableForm = (data: any) => {
  tableForm.value = data
  flowPanel.value?.updatedForms(data)
  saveLocalStorage()
}
const updateFlowObject = (data: any) => {
  flowObject.value = data
  saveLocalStorage()
}
const saveLocalStorage = () => {
  const flow = {
    tableForm: tableForm.value,
    flowObject: flowObject.value
  }
  const flowJSON = JSON.stringify(flow)
  localStorage.setItem('flow', flowJSON)
}
onMounted(() => {
  // 初始化流程
  const flowJSON = localStorage.getItem('flow') || '{}'
  const flow = JSON.parse(flowJSON)
  tableForm.value = formDesigner.value?.init(flow.tableForm)
  flowObject.value = flowPanel.value?.init(tableForm.value, flow.flowObject)
})
</script>

<style lang="scss">
.tab-title {
  background-color: #ffffff;
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__item {
    padding-right: 15px;
  }
  .el-tabs__item.is-top:nth-child(2) {
    padding-left: 15px;
  }
}
.tab-content {
  background-color: #ffffff;
  width: 100vw;
  height: calc(100vh - 40px);
}
</style>
